<template>
  <view class="tab-component">
    <view class="left-box">
      <text class="active-num">已选中(0)</text>
      <text class="total-text">总计</text>
      <text class="price">¥0</text>
    </view>
    <view class="right-box">结算</view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.tab-component {
  position: relative;
  z-index: 9;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 110rpx;
  background: #fff;
  border-top: 1rpx solid #f5f5f5;
  padding: 0 20rpx;
  .left-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    .active-num {
      font-size: 24rpx;
      color: #808080;
    }
    .total-text {
      font-size: 28rpx;
      color: #808080;
      margin-left: 10rpx;
    }
    .price {
      font-size: 40rpx;
      font-weight: 700;
      color: #ff0777;
      margin-left: 10rpx;
    }
  }
  .right-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 270rpx;
    height: 96rpx;
    background: linear-gradient(270deg, #ff11a0 -0.11%, #ff0777 99.89%);
    color: #fff;
    border-radius: 20rpx;
  }
}
</style>
